<template>
  <div class="container" :class="{ active: activeId === props.info.id }" @dblclick="toggleSong">
    <div class="flex items-center">
      <img class="w-10 h-10 mr-2" :src="showImg" />
      <div class="flex flex-col">
        <span class="h-5 leading-5">{{ info?.name ?? '云音乐' }}</span>
        <span class="h-5 leading-5">{{ (info?.ar && info?.ar[0]?.name) ?? '一起听' }}</span>
      </div>
    </div>
    <span>{{ showTotal }}</span>
  </div>
</template>

<script lang="ts" setup>
import defImg from '@/assets/img/def-img.png'
import { computed } from 'vue'
import type { MusicSong } from '@/types/song/index'
import { useFormat } from '@/hooks/useFormat'
const { formatTimeStamp } = useFormat()
const props = defineProps<{
  info: MusicSong
  activeId: number
}>()

const emit = defineEmits<{ (e: 'toggleSong', value: MusicSong): void }>()

const showImg = computed(() => props.info?.al?.picUrl ?? defImg)
const showTotal = computed(() => (props.info?.dt ? formatTimeStamp(props.info?.dt) : `00:00:00`))

const toggleSong = () => {
  emit('toggleSong', props.info)
}
</script>

<style lang="less" scoped>
.container {
  @apply border-b-stone-50 text-xs flex items-center justify-between cursor-pointer hover:bg-slate-200 p-2;
}
.active {
  @apply text-emerald-400 border-l-2 border-l-emerald-400;
}
</style>
